<template>
  <div style="width: 100%;">
    <div class="formBox">
      <el-form :model="form" inline class="myForm">
        <el-form-item>
          <el-select class="w120" clearable v-model="form.classify"  placeholder="商品类型">
            <el-option v-for="item in productType" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item class="rightForm-item">
          <el-select class="w140" clearable v-model="form.mallInfoPut" v-selectClose placeholder="允许上架商城">
            <el-option v-for="item in shelvesAllowedList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-input class="w260" v-model="form.fuzzyValue" clearable placeholder="商品名称/编号/助记码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select class="w260" v-model="form.businessBrandIdList" v-selectClose clearable multiple collapse-tags collapse-tags-tooltip filterable
            placeholder="经营品牌">
            <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="btnBox">
            <el-button type="success" @click="search">查询</el-button>
            <el-button @click="rest">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <el-scrollbar class="table" v-loading="loading">
      <div :class="`productItem ${itemDetail.id === item.id ?'productItemed':''}`" @click="selectProductItem(item)" v-for="item in tableData" :key="item.id">
        <el-image class="productItem-img" :src="item.firstPicture" fit="contain"></el-image>
        <div>
          <div class="productItem-name">
            <div class="productItem-tag" :style="{ background: formatType(item.classify).color }">
              {{ formatType(item.classify).text }}
            </div>
            <div style="font-weight: bold;">{{ item.name }}</div>
          </div>
          <div class="productItem-upc">{{ item.code }}</div>
        </div>
        <div class="productItem-status" v-if="item.mallInfoPut === 1"></div>
        <div class="productItem-noStatus" v-else></div>
      </div>
      
    </el-scrollbar>
    <div class="myPagination">
      <el-pagination 
        :pager-count="3"
        background
        @current-change="currentChange"
        layout="prev, pager, next" 
        :total="total" 
      />
    </div>
  </div>
</template>

<script setup>
import { useProduct } from './hooks'
const { search,
        rest,
        form, 
        productType, 
        shelvesAllowedList, 
        brandList, 
        tableData,
        itemDetail,
        total,
        loading } = useProduct()
search()
const selectProductItem = (item) => {
  itemDetail.value = item
}
const currentChange = (val) => {
  form.value.page.current = val
  search()
}
const formatType = (type) => {
  switch (type) {
    case 1:
      return { text:'产品', color: '#3480FF' }
    case 2:
      return { text:'项目', color: '#18BF5B' }
    case 3:
      return { text:'套餐', color: '#0C268C' }
    case 7:
      return { text:'疗程', color: '#FFAB00' }
    default:
      return '#3480FF'
  }
}

</script>

<style lang="less" scoped>
div{
  box-sizing: border-box;
}
.formBox {
  padding: 0 12px;
  border-bottom: 1px solid #DEDEDE;
}

.myForm {
  :deep(.el-form-item) {
    margin-right: 12px;
    margin-bottom: 12px;
  }

  .btnBox {
    width: 268px;
    display: flex;
    justify-content: flex-end;
  }

  .rightForm-item {
    margin-right: 0px !important;
  }
}
.table {
  position: relative;
  padding: 16px 12px 12px 12px;
  height: calc(100vh - 397px);
  
  .productItem {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    padding: 8px;
    border-radius: 4px;
    background: #F6F6F6;
    cursor: pointer;
    overflow: hidden;

    .productItem-img {
      margin-right: 8px;
      width: 48px;
      height: 48px;
      background: #fff;
      border-radius: 4px;
      border: 1px solid #DDD;
    }

    .productItem-name {
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #000;
      margin-bottom: 8px;
    }

    .productItem-tag {
      margin-right: 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 20px;
      color: #fff;
      font-size: 12px;
      border-radius: 4px;
    }

    .productItem-upc {
      font-size: 14px;
      color: #666;
    }

    .productItem-status {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 12px;
      color: #fff;
      width: 38px;
      height: 38px;

      // background: #16BE5D;
      &::after {
        content: '商城';
        position: absolute;
        top: 4px;
        right: 0px;
        rotate: 45deg;
      }

      &::before {
        content: '';
        position: absolute;
        width: 38px;
        height: 38px;
        left: 0;
        background: #16BE5D;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        /*三角*/
      }
    }

    .productItem-noStatus {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 12px;
      color: #A1A1A1;
      width: 38px;
      height: 38px;

      &::after {
        content: '商城';
        position: absolute;
        top: 4px;
        right: 0px;
        rotate: 45deg;
      }

      &::before {
        content: '';
        position: absolute;
        width: 38px;
        height: 38px;
        left: 0;
        background: #DEDEDE;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        /*三角*/
      }
    }
  }
  .productItemed{
    background: #D6E6FF;
  }
  
}
.myPagination{
  margin-top: 7px;
  padding-right: 12px;
  display: flex;
  justify-content: flex-end;
}

.w120 {
  width: 120px;
}

.w140 {
  width: 140px;
}

.w260 {
  width: 268px;
}</style>